<script setup>
import { reactive, ref, watchEffect } from "vue";
import { convertToChinese } from "@/utils/common.js";
import UploadImg from "@/components/UploadImg/index.vue";
import UploadVideo from "@/components/UploadVideo/index.vue";
import ModalTable from "./ModalTable.vue";
const props = defineProps({
  moduleList: {
    type: Array,
    default: () => [],
  },
  showBtn: {
    type: Boolean,
    default: true,
  },
});
const emits = defineEmits(["change", "radioChange"]);
const list = ref([]);
const modalTableRef = ref();
watchEffect(() => {
  list.value = JSON.parse(JSON.stringify(props.moduleList));
});
const backValueActivityImg = (img, item) => {
  item.imgList = img;
  emits("change", list.value);
};
const tableLoading = ref(false);

const handleSizeChange = (pageSize, item) => {
  item.pageConfig.pageSize = pageSize;
  handleCurrentChange(1, item);
};
const handleCurrentChange = (currentPage, item) => {
  item.pageConfig.currentPage = currentPage;
};

const selectBackValueActivityImg = (img, item) => {
  item.selectImgList = img;
  emits("change", list.value);
};

const backFile = (video, item) => {
  item.fileUrl = video;
  emits("change", list.value);
};

const addMoudules = () => {
  list.value.push({
    imgList: '',
    radio: 3,
    pbradio: 3,
    selectImgList: [],
    fileUrl: '',
    tableData: [],
    pageConfig: {
      currentPage: 1,
      pageSize: 10,
      layout: "total,sizes, prev, pager, next",
      pageSizes: [10, 20, 50, 100, 200],
      total: 0,
    },
  });
  emits("change", list.value);
};
const delIndex = ref(0);
const delMoudules = (index) => {
  delIndex.value = index;
  emits("change", list.value);
  messageBoxRef.value.open();
};
const showModalTable = () => {
  modalTableRef.value.open();
};
const messageBoxRef = ref();
const messageConfirm = () => {
  list.value.splice(delIndex.value, 1);
  emits("change", list.value);
};
const pbradioChange = (e) => {
  emits("radioChange", { value: e, list: list.value });
};
</script>
<template>
  <div class="module_item" v-for="(item, index) in list" :key="index">
    <div class="module_header">
      <div class="header_left">模块{{ convertToChinese(index + 1) }}</div>
      <div class="header_right" @click="delMoudules(index)">删除</div>
    </div>
    <div class="module_content">
      <el-form :model="item">
        <el-form-item label="标题图片" class="edit_bottom">
          <div>
            <UploadImg
              @backValue="backValueActivityImg($event, item)"
              :imageUrlInfo="item.imgList"
              :styles="'width:380px;height:152px;'"
            >
            </UploadImg>
            <div class="tipBox">
              建议图片宽度≥750px,仅可上传1张,大小不超过2M
            </div>
          </div>
        </el-form-item>
        <el-form-item label="类型" label-width="64px" class="edit_bottom">
          <el-radio-group v-model="item.radio">
            <el-radio :label="3">商品</el-radio>
            <el-radio :label="6">图片</el-radio>
            <el-radio :label="9">视频</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="item.radio == 3">
          <el-form-item label-width="64px">
            <div class="select_style" @click="showModalTable">选择</div>
          </el-form-item>
          <el-form-item label-width="64px" class="module_table edit_bottom">
            <el-table :data="item.tableData" stripe>
              <el-table-column prop="date" label="商品名称" width="180" />
              <el-table-column prop="name" label="参考批发价" width="180" />
              <el-table-column prop="address" label="库存" />
              <el-table-column prop="caozuo" label="操作" />
            </el-table>
            <div class="pageClass">
              <el-pagination
                :current-page="item.pageConfig?.currentPage"
                :layout="item.pageConfig?.layout"
                :page-size="item.pageConfig?.pageSize"
                :page-sizes="item.pageConfig?.pageSizes"
                :total="item.pageConfig?.total"
                background
                @size-change="handleSizeChange($event, item)"
                @current-change="handleCurrentChange($event, item)"
              >
              </el-pagination>
            </div>
          </el-form-item>
          <el-form-item label="排版" label-width="64px" class="edit_bottom">
            <el-radio-group
              v-model="item.pbradio"
              @change="pbradioChange($event, item)"
            >
              <el-radio :label="3">一列一排</el-radio>
              <el-radio :label="6">一列两排</el-radio>
              <el-radio :label="9">一列三排</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div v-if="item.radio == 6">
          <el-form-item label="选择图片">
            <div>
              <UploadImg
                :styles="'width:380px;height:152px;'"
                @backValue="selectBackValueActivityImg($event, item)"
                :multiple="true"
                :imageListUrlInfo="item.selectImgList"
              >
              </UploadImg>
              <div class="tipBox">
                图片建议宽度≥686px，单张大小不超过2M，最多上传20张图片
              </div>
            </div>
          </el-form-item>
        </div>
        <div v-if="item.radio == 9">
          <el-form-item label="选择视频">
            <div>
              <UploadVideo
                :styles="'width:380px;height:152px;'"
                @backValue="backFile($event, item)"
              >
              </UploadVideo>
              <div class="tipBox">视频建议宽度≥686px，大小不超过30M</div>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
  <el-button
    v-if="showBtn"
    class="mt8 mb24 addbtnClass"
    @click="addMoudules"
    type="primary"
    >新增模块</el-button
  >
  <ModalTable ref="modalTableRef"></ModalTable>
  <MessageBox
    ref="messageBoxRef"
    :content="'确定删除该模块吗？'"
    :rightBtnTxt="'删除'"
    @confirm="messageConfirm"
  />
</template>

<style lang="less" scoped>
.module_item {
  width: 700px;
  border: 1px solid #ddd;
  margin-bottom: 16px;
  .module_header {
    height: 46px;
    // width: 100%;
    display: flex;
    align-items: center;
    padding: 0 16px;
    justify-content: space-between;
    background: #dddddd;
    .header_left {
      color: #000000;
      font-size: 14px;
      font-weight: 600;
    }
    .header_right {
      color: #ff2440;
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;
    }
  }
  .module_content {
    padding: 16px;
    .tipBox {
      color: #666666;
      font-size: 12px;
      font-weight: 400;
      margin-top: 8px;
      line-height: normal;
    }
    .select_style {
      color: #3480ff;
      font-size: 14px;
      font-weight: 400;
      line-height: normal;
      cursor: pointer;
    }
    .edit_bottom {
      margin-bottom: 10px !important;
    }
    .module_table {
      :deep(.el-table th.el-table__cell) {
        background: #dddddd;
      }
      .pageClass {
        display: flex;
        flex: 1;
        margin-top: 16px;
        justify-content: flex-end;
      }
    }
  }
}
.addbtnClass {
  padding: 9px 42px !important;
}
</style>
